<template>
    <div>
        <m-list-card icon="hero" title="英雄列表" :Cats="heroCats">
                <template #items="{category}" >
                    <div class="d-flex flex-wrap text-center text-dark pt-2">
                        <router-link 
                        tag="div"
                        :to = "`/hero/${hero._id}`"
                        v-for="(hero,key) in category.heroList" :key="key"
                         class="py-1 px-2"
                         style='width:20%'>
                            <img :src="hero.avatar" style="width:98%" alt=""/>
                            <div class="fs-xs">{{hero.name}}</div>
                        </router-link>
                    </div>
                </template>
            </m-list-card>
    </div>
</template>

<script>
    export default {
        props:{
            heroCats:{
                type:Array,
                default(){
                    return []
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
@import 'assets/scss/_variables.scss';
</style>